<template>
  <div class="search-list-item" @click="$emit('openPage', dataItem)">
    <div v-if="highlight" class="search-item__content" >
      <div v-html="highlightText"></div>
    </div>
    <div v-else class="search-item__content" >
      {{ dataItem.name }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataItem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    highlight: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  computed: {
    highlightText() {

      let {name:searchStr, searchContent} = this.dataItem;
      
      // let idxPosArr = searchStr.allMatchIndexOf(searchContent);
      // let replaceTextLen = `<span class="search-item__content-highlight">${searchContent}</span>`.length;
      // for(let idxPos = 0; idxPos < idxPosArr.length; idxPos++) {
      //   let latestCurrIdxPos = idxPosArr[idxPos] + (replaceTextLen - searchContent.length) * idxPos;
        
      //   let subStr = searchStr.substring(latestCurrIdxPos, latestCurrIdxPos + searchContent.length);
      //   searchStr = searchStr.replace(new RegExp(subStr), `<span class="search-item__content-highlight">${subStr}</span>`);
      // }

      searchStr = searchStr.replaceAll(new RegExp(searchContent, 'ig'), ($1, $2)=> {
        return `<span class="search-item__content-highlight">${$1}</span>`
      })

      return searchStr;
    }
  },
  mounted() {
    console.log('********** searchItem mounted：', this.dataItem)
  }
}
</script>
<style scoped>
.search-list-item /deep/ .search-item__content-highlight{
  color:red;
}
</style>